<template>
    <div>
        <el-popover v-if="cardData"
                    placement="top"
                    width="374"
                    trigger="hover">
            <div class="user-info u-flex-col u-col-center">
                <img class="user-avatar"
                     src="@/assets/logo.png">
                <p class="font-weight-500 color-333 margin-box">{{ cardData.studuentName }}</p>
                <!-- <p class="color-999">{{ cardData.telNo }}</p> -->
                <div class="tag_box">
                    <!-- <el-tag>
                        {{ cardData.school }}
                    </el-tag> -->
                    <el-tag>
                        {{  cardData.Class }}
                    </el-tag>
                </div>
                <div class="buyUserinfo u-flex u-row-between color-333 margin-box">
                    <div class="u-flex-col">
                        <div class="u-flex ">
                            <img class="icon-img"
                                 src="@/assets/img/superior.png">
                            <span class="color-666">家长：</span>
                            <span class="color-333">{{  cardData.parentName }}</span>
                        </div>
                        <div class="u-flex margin-top-8">
                            <img class="icon-img"
                                 src="@/assets/img/phone.png">
                            <span class="color-666">联系电话：</span>
                            <span class="color-333">{{  cardData.parentPhone }}</span>
                        </div>
                    </div>
                    <el-button plain
                               size="mini">TA的主页</el-button>
                </div>
                <!-- <div v-if="cardData.salesman"
                     class="buyUserinfo u-flex u-row-between color-333">
                    <div class="u-flex-col">
                        <div class="u-flex ">
                            <img class="icon-img"
                                 src="@/assets/img/superior.png">专属管家：
                            <span class="color-999">{{  cardData.salesman.nickName }}</span>
                        </div>
                        <div class="u-flex ">
                            <img class="icon-img"
                                 src="@/assets/img/phone.png">联系电话：
                            <span class="color-999">{{  cardData.salesman.telNo }}</span>
                        </div>
                    </div>
                    <el-button plain
                           size="mini">TA的主页</el-button>
                </div> -->
                <!-- <el-button plain
                       size="mini"
                       class="right-box">去TA主页</el-button> -->
            </div>
            <div slot="reference"
                 class="business-card-box">
                <div class=" u-flex u-row-center">
                    <img class="business-card-img"
                         src="@/assets/img/ddlb_icon_mp@2x.png">
                    <div class="hide_box u-flex-col">
                        <div class="font-weight-500 u-line-1">{{ cardData.studuentName }}</div>
                        <span class="u-line-1">{{ cardData.school + cardData.Class }}</span>
                    </div>
                </div>
                <!-- <div>
                <span class="font-weight-500">所属上级：</span><span class="business-card-superior">{{ cardData.superior && cardData.superior.nickName || '暂无上级' }}</span>
            </div> -->
            </div>
        </el-popover>
        <div v-else>暂无</div>
    </div>
</template>

<script>
export default {
    props: {
        cardData: {
            type: Object,
            default: () => { }
        },
    },

    data() {
        return {};
    },
    filters: {
        memberTypeFilter(status) {
            switch (status) {
                case 0:
                    return '普通用户'
                case 1:
                    return '业务员用户'
                case 2:
                    return '老师'
                case 3:
                    return '校长'
            }
        },
        levelTypeFilter(status) {
            switch (status) {
                case 0:
                    return '消费合伙人等级'
                case 1:
                    return '押金共享合伙人等级'
                case 2:
                    return '投资共享合伙人等级'
                case 3:
                    return '销售等级'
            }
        },
    },
    created() {
    },
    methods: {

    }
};
</script>

<style lang="scss" scoped>
.user-info {
    position: relative;
    .right-box {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .user-avatar {
        width: 72px;
        height: 72px;
        border-radius: 100%;
    }
    .margin-box {
        margin: 15px 0 0 0;
    }
    .tag_box {
        margin-top: 8px;
        .el-tag + .el-tag {
            margin-left: 5px;
        }
    }
    .buyUserinfo {
        font-size: 12px;
        width: 90%;
        padding: 8px;
        background-color: #f5f5f5;
    }
    .buyUserinfo + .buyUserinfo {
        margin-top: 8px;
    }
    .icon-img {
        margin-right: 5px;
        width: 16px;
        height: 16px;
    }
}
.business-card-box {
    color: #333;
    // font-size: 14px;
    .hide_box {
        overflow: hidden;
        width: 100px;
    }
    .business-card-img {
        width: 38px;
        height: 40px;
        margin-right: 5px;
    }
    .business-card-superior {
        color: #999;
        margin-left: 5px;
    }
}
</style>
